<script>
import BomNav from "../components/BomNav.vue";
import { reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  components: {
    BomNav,
  },
  setup() {
    let router = useRouter(); //实例化路由
    console.log(router);
    let data = reactive({
      tuilists: [],
    });

    return {
      data,
    };
  },
};
</script>

<template>
  <div class="searchbox">
    <!-- 搜索结果 -->
    <div class="select">
      <!-- <h4>精选好书</h4> -->
      <div
        class="item"
        v-for="item in data.tuilists"
        :key="item.bookId"
        @click="liberFun(item.bookId)"
      >
        <img :src="item.coverImg" :alt="item.bookName" />
        <div class="info">
          <h5>{{ item.bookName }}</h5>
          <p>{{ item.introduction }}</p>
          <div class="mess">
            <span>{{ item.authorPenName }}</span>
            <span>连载</span>
            <span>{{ item.categoryName }}</span>
            <span>{{ item.remark }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <BomNav/>
</template>


<style lang="scss" scoped>
.serchbox {
  .select {
    box-shadow: 0px 0px 4px #ccc;
    border-radius: 10px;
    margin-top: 20px;
    padding-bottom: 10px;
    h4 {
      height: 60px;
      font-size: 20px;
      font-weight: 800;
      line-height: 60px;
      margin-left: 20px;
    }
    .item {
      margin-left: 10px;
      display: flex;
      margin-bottom: 16px;
      img {
        display: block;
        width: 76px;
        height: 100px;
        border-radius: 10px;
      }
      .info {
        margin-left: 10px;
        h5 {
          font-weight: 800;
          font-size: 16px;
          height: 36px;
          line-height: 36px;
          word-wrap: break-word;
          overflow: hidden;
          display: -webkit-box; //弹性盒子布局
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
        p {
          width: 250px;
          height: 36px;
          line-height: 18px;
          font-size: 12px;
          word-wrap: break-word;
          overflow: hidden;
          display: -webkit-box; //弹性盒子布局
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
      .mess {
        span {
          font-size: 12px;
          margin-right: 20px;
          position: relative;
          color: #999;
          &::after {
            content: "";
            display: block;
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #999;
            top: 0px;
            bottom: 0px;
            right: -10px;
            margin: auto 0;
          }
          &:nth-last-child(1)::after {
            display: none;
          }
        }
      }
    }
  }
}
</style>